import React, { Component } from 'react';
 
class Ball extends Component {

    render() { 
        let ballBg="ball-wrap green";
        if(this.props.percent>80){ 
            ballBg="ball-wrap red"
        }else if(this.props.percent>=70 && this.props.percent<=80){
            ballBg="ball-wrap orange"
        }else if(this.props.percent>=60 && this.props.percent<=70){
            ballBg="ball-wrap yellow"
        }else{
            ballBg="ball-wrap green"
        }
        return (
            <div className={ballBg}>
                <div className="ball">
                    <div className="inner">
                        <div className="percent">
                            {this.props.percent}%
                        </div>
                        <div className="water" style={{top:100-this.props.percent+'%'}}></div>
                        <div className="water w2" style={{top:100-this.props.percent+'%'}}></div>
                    </div>
                </div>
            </div>
        )
    }
}

module.exports=Ball;
